<template>
	<view class="">
		<view class="bg" :style="{ '--bg-image': `url(${daziBg1})` }">

		</view>
		<view class="cardDistributor">
			<view class=" myNmae flex-start-center margin-top_30rpx ">
				<view class=" " style="color: #4D4D4D;min-width: 140rpx;">
					联系姓名
				</view>
				<view class="">
					<input class="uni-input" v-model="form.name" placeholder="请填写申请人姓名" />
				</view>


			</view>
			<view class=" myNmae flex-start-center margin-top_60rpx ">
				<view class=" " style="color: #4D4D4D;min-width: 140rpx;">
					联系电话
				</view>
				<view class="">
					<input class="uni-input" v-model="form.phone" placeholder="请填写申请人电话" />
				</view>


			</view>

			<view class=" myNmae flex-start-center margin-top_60rpx " @click="open()">
				<view class=" " style="min-width: 140rpx;color: #4D4D4D;">
					所在城市
				</view>
				<view class="">
					<input disabled class="uni-input" v-model="location" placeholder="请选择申请所在的城市" />
				</view>
				<view class="" style="margin-left: 200rpx;">
					<uni-icons color="#999" type="right" size="18"></uni-icons>
				</view>
				<barry-picker ref="dialog" @get-address="getAddress"></barry-picker>


			</view>
			<radio-group name="apply" class="radioText flex protocol" :class="'animation-' + animation"
				@click="checkedOn2()">

				<label @click.stop="checkedOn2()">
					<view class="flex-start-center">
						<radio :checked="agreeChecked" value="1" color="#A265FC" style="transform:scale(0.8);" />
						<view class=" flex ">
							<text style="color: #A265FC;" @click.stop="toAgreement()">查看并且同意服务协议</text>
						</view>
					</view>

				</label>


			</radio-group>
			<view class="submitApplication flex" @click="submitFn()">
				申请费用：￥{{basicConfiguration.apply_associate_fee}}
			</view>
			<view class="margin-top_50rpx">
				<view class="flex-align-center">
					<view class=" line">

					</view>
					<view class="font-weight_bold">
						合伙人说明
					</view>
				</view>
				<view class="margin-top_16rpx">
					<view v-html="basicConfiguration.associate_desc" class="padding30">

					</view>
				</view>
			</view>
		</view>
		<sunui-popup ref="myPackagePopup">
			<template v-slot:content>

				<view class="flex-column ">
					<scroll-view :scroll-y="true" style="height: 1000rpx;">
						<view style="text-align: center; margin-bottom: 20rpx;">
							服务协议
						</view>
						<uv-parse :content="basicConfiguration.associate_service_agreement" :selectable="true"></uv-parse>
	<!-- 					<rich-parser :html="basicConfiguration.associate_service_agreement"
							domain="https://6874-html-foe72-1259071903.tcb.qcloud.la" lazy-load ref="article" selectable
							show-with-animation use-anchor lazyLoad="true"></rich-parser> -->
						<!-- 	<view v-html="transaction_rule" class="">
		
						</view> -->
					</scroll-view>
				</view>

			</template>
		</sunui-popup>

	</view>

</template>

<script>
	export default {
		components: {


		},
		data() {
			return {
				userInfo: uni.getStorageSync("userInfo"),
				daziBg1: 'https://dazi.weijuyunke.cn/storage/uploads/20240816/d41bcfcd765cb84adbaa5b1e9289417e.png',
				form: {
					name: uni.getStorageSync("userInfo").real_name,
					phone: uni.getStorageSync("userInfo").phone,

				},
				location: '',
				basicConfiguration: {},
				animation: '',
				agreeChecked: false,
				isSuccess: false,
				payStatue: ''

			}
		},
		onLoad() {
			this.basicConfigurationFn()
		},
		onShow() {
			this.basicConfigurationFn()
			this.$at.releaseKey('submit');
		},
		methods: {
			checkedOn2(e) {
				this.agreeChecked = !this.agreeChecked
			},
			toAgreement() {
				this.$refs.myPackagePopup.show({
					style: 'background-color:#fff;width:600rpx;border-radius:10rpx;padding:20rpx',
					bottomClose: true,
					shadeClose: true,
					topclose: true
				});
			},
			async basicConfigurationFn() {
				const result = await this.$http.post({
					url: this.$api.config,
					data: {


					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})
				if (result.code == 0) {
					console.log(result)
					this.basicConfiguration = result.data

				}
				// const res = await this.$http.post({
				// 	url: this.$api.getAssociatePay,
				// 	data: {

				// 		id: this.userInfo.id
				// 	},
				// 	headers: {
				// 		'Authorization': this.userInfo.token
				// 	}

				// })
				// if (res.code == 0) {

				// 	this.payStatue = '已经支付'

				// }


			},
			open() {
				console.log(this.$refs.dialog.show)
				this.$refs.dialog.openPicker()
			},
			getAddress(e) {
				console.log('选择的地址是', e);
				this.location = e
			},
			submitFn() {
				this.$at.uniDoFunc({
					key: 'submit',
					success: async () => {
						this.$at.lockKey('submit');
						// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择
						if (!this.agreeChecked) {
							this.$sun.toast('请先阅读并同意当前协议', 'none');
							this.animation = 'shake';
							setTimeout(() => {
								this.animation = '';
							}, 1300);
							this.$at.releaseKey('submit');
						} else if (!this.form.name) {
							this.$sun.toast("请选择申请人姓名", 'none')
							this.$at.releaseKey('submit');

						} else if (!this.form.phone) {
							this.$sun.toast("请选择申请的手机号", 'none')
							this.$at.releaseKey('submit');

						} else if (!this.location) {
							this.$sun.toast("请选择城市", 'none')
							this.$at.releaseKey('submit');

						} else {


							if (uni.getStorageSync("system").apply_associate_fee != 0) {
								const result = await this.$http.post({
									url: this.$api.AssociateGzhOrder,
									data: {

										pay_type: 1,
										id: this.userInfo.id


									},
									headers: {
										'Authorization': this.userInfo.token
									}

								})


								if (result.code == 0) {

										let pay = result.data
										this.$at.releaseKey('submit');
										uni.requestPayment({
											provider: 'wxpay',
											appid: pay.appid,
											timeStamp: String(pay.timeStamp),
											nonceStr: pay.nonceStr,
											package: pay.package,
											signType: pay.signType,
											paySign: pay.paySign,
											success: async (res) => {
												uni.showModal({
													content: "支付成功",
													showCancel: false,
													confirmText: '确定',
													success:async (re) => {
														if (re.confirm) {
															const ress = await this.$http.post({
																url: this.$api.distributor,
																data: {
																	phone: this.form.phone,
																	name: this.form.name,
																	address: this.location,
																	userId: this.userInfo.id
																},
																headers: {
																	'Authorization': this.userInfo
																		.token
																}
															
															})
															console.log(res)
															if (ress.code == 0) {
																this.$at.releaseKey('submit');
																// 跳转到登录页面
																this.$sun.toast(ress.message, 'none')
															
																this.userInfoFn()
															
															
															
															} else {
																this.$at.releaseKey('submit');
																this.$sun.toast(ress.message, 'none')
															}
															
														}
													}
												})
											},
											fail: (err) => {
												this.$at.releaseKey('submit');
												console.log(JSON.stringify(err));
												this.$sun.toast("取消支付", 'error');
											}
										});
										
		
										this.$at.releaseKey('submit');
									


								} else {
									this.$sun.toast(result.message, 'none')
									this.$at.releaseKey('submit');
								}
							} else {
								const res = await this.$http.post({
									url: this.$api.distributor,
									data: {
										phone: this.form.phone,
										name: this.form.name,
										address: this.location,
										userId: this.userInfo.id
									},
									headers: {
										'Authorization': this.userInfo.token
									}

								})
								console.log(res)
								if (res.code == 0) {
									// 跳转到登录页面
									this.$sun.toast(res.message, 'none')

									this.userInfoFn()



								} else {
									this.$at.releaseKey('submit');
									this.$sun.toast(res.message, 'none')
								}

								this.$at.releaseKey('submit');

							}

						}


					}
				});
			},
			async userInfoFn() {
				const result = await this.$http.post({
					url: this.$api.userInfo,
					data: {

						// id:this.userInfo.id


					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (result.code == 0) {
					console.log('data', result.data);
					wx.setStorageSync('userInfo', result.data);
					setTimeout(() => {
						this.$sun.navTo('/pagesB/index/auditStatus')
					}, 500)


				}
			},
		}
	}
</script>

<style lang="less">
	/* 隐私协议 start */
	.radioText {

		margin: 78rpx 0 28rpx 0;
	}

	.agree {
		color: #666;

		text {
			color: #1890ff;
			// color: #19c866;
		}
	}

	.animation {
		width: 10rem;
		height: 2rem;
		background: #ffffff;
		margin-top: 0.5rem;
	}

	.animation-shake {
		animation: shake 0.3s !important;
	}

	@keyframes shake {

		0%,
		100% {
			transform: translateX(0);
		}

		10% {
			transform: translateX(-9px);
		}

		20% {
			transform: translateX(8px);
		}

		30% {
			transform: translateX(-7px);
		}

		40% {
			transform: translateX(6px);
		}

		50% {
			transform: translateX(-5px);
		}

		60% {
			transform: translateX(4px);
		}

		70% {
			transform: translateX(-3px);
		}

		80% {
			transform: translateX(2px);
		}

		90% {
			transform: translateX(-1px);
		}
	}

	.line {
		width: 10rpx;
		height: 30rpx;
		border-radius: 106rpx;
		margin-right: 10rpx;
		background: rgb(120, 93, 246);
	}

	.bg {
		background-repeat: no-repeat;
		background-size: cover;
		background-image: (var(--bg-image));
		height: 368rpx;
	}

	.submitApplication {
		color: #fff;
		margin-top: 20rpx;
		height: 102rpx;
		border-radius: 142rpx;

		background: rgb(120, 93, 246);
	}


	.cardDistributor {
		margin-top: -30rpx;

		// height: 618px;
		border-radius: 10px;
		padding: 30rpx;
		background: rgb(255, 255, 255);

		.myNmae {

			background-color: #fff;
			min-width: 70rpx;

			.avatar {
				width: 84rpx;
				height: 84rpx;
			}

			input {
				margin-left: 50rpx;
				text-align: left;
			}

			.backgroundImg {

				height: 154rpx;


			}

		}
	}
</style>